<!-- 商品详情页 -->
 <template>
  <div class="detailPage">
    <nav-bar>
      <template #default> 商品详情 </template>
    </nav-bar>
    <div class="detailList">
      <h3 class="title">商品名:{{ product.pname }}</h3>
      <img :src="product.pic" :alt="product.pname" class="productImage" />
      <h4 class="price">
        价格:<span>${{ product.price }}</span>
      </h4>
      <div class="button">
        <el-button type="primary" class="add-to-cart" @click="handleAddCart"
          >加入购物车</el-button
        >
        <el-button type="success" class="buy-now" @click="handleBuyNow"
          >立即购买</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import NavBar from "@/components/common/NavBar.vue";
import { useCartStore } from "@/stores/modules/cart";
import { ElMessage } from "element-plus";

export default {
  components: {
    NavBar,
  },
  setup() {
    const route = useRoute(); // 注意这里是useRoute,不是useRouter
    const router = useRouter();

    const state = reactive({
      product: JSON.parse(route.query.goods), // 从query中获取商品信息
    });

    // 加入购物车
    const cartStore = useCartStore();
    const handleAddCart = () => {
      if (!localStorage.getItem("username")) {
        ElMessage.warning("您还没有登录");
        router.push("/login");
        return;
      }
      if (state.product.stock <= 0) {
        ElMessage.warning("商品库存不足");
        return;
      }
      cartStore.addToCart({
        id: state.product.id,
        name: state.product.pname,
        price: state.product.price,
        image_url: state.product.pic,
        stock: state.product.stock,
      });
    };

    // 立即购买
    const handleBuyNow = () => {
      if (!localStorage.getItem("username")) {
        ElMessage.warning("您还没有登录");
        router.push("/login");
        return;
      }
      if (state.product.stock <= 0) {
        ElMessage.warning("商品库存不足");
        return;
      }
      router.push({
        path: "/checkout",
        query: {
          source: "direct",
          productId: state.product.id,
          quantity: 1,
        },
      });
    };

    return {
      ...toRefs(state),
      handleBuyNow,
      handleAddCart,
    };
  },
};
</script>

 <style scoped>
.detailPage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  height: 100vh;
  background-color: #f7f7f7;
}

.detailList {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px; /* 限制最大宽度 */
  margin-top: 20px;
}

.title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.productImage {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.price {
  font-size: 1.2rem;
  text-align: center;
  margin: 10px 0;
  color: #555;
}

.price span {
  color: red;
  font-weight: bold;
}

.buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.add-to-cart,
.buy-now {
  width: 45%;
  font-size: 1rem;
}
</style>
